<template>
    <div style="background-color: #ececec; padding: 10px;">
        <a-card title="编译示意图:">
            <img src="../../assets/svg/scope.png" alt="" />
            <a-card-meta
                title="相关概念:LHF,RHF"
                description="LHF,RHF"
            ></a-card-meta>
        </a-card>

        <br />
        <a-row :gutter="16">
            <a-col :span="8">
                <a-card title="LHF查找" :bordered="false">
                    <p>
                        引擎执行 <strong>LHS</strong>
                        查询时,如果在顶层(全局作用域)中也无法找到目标变量,
                        全局作用域中就会创建一个具有该名称的变量,并将其返还给引擎;
                    </p>
                    <p>
                        严格模式下，禁止自动或隐式地创建全局变量。因此,在
                        严格模式中
                        <strong>LHS</strong>
                        查询失败时,并不会创建并返回一个全局变量,引擎会抛出同
                        <strong>RHS</strong> 查询 失败时类似的
                        <strong>ReferenceError</strong> 异常。
                    </p>
                </a-card>
            </a-col>
            <a-col :span="8">
                <a-card title="RHF查找" :bordered="false">
                    <p>
                        引擎执行 <strong>RHS</strong>
                        查询时，在所有嵌套的作用域中遍寻不到所需的变量,就会抛出
                        <strong>ReferenceError</strong> 异常;
                    </p>
                    <p>
                        查询找到了一个变量,但是你尝试对这个变量的值进行不合理的操作,
                        比如试图对一个非函数类型的值进行函数调用,或着引用 null
                        或 undefined 类型的值中的
                        属性,那么引擎会抛出另外一种类型的异常,叫作
                        <strong>TypeError</strong> 。
                    </p>
                </a-card>
            </a-col>
            <a-col :span="8">
                <a-card title="总结" :bordered="false">
                    <p>
                        作用域是一套规则,用于确定在何处以及如何查找变量(标识符),
                    </p>
                    <p>
                        如果查找的目的是对 变量进行赋值,那么就会使用
                        <strong>LHS</strong> 查询;
                    </p>
                    <p>
                        如果目的是获取变量的值,就会使用
                        <strong>RHS</strong> 查询。
                    </p>
                    <span
                        ><strong>ReferenceError</strong> 同作用域判别失败相关,而
                        <strong>TypeError</strong> 则代表作用域判别成功了,但是对
                        结果的操作是非法或不合理的。</span
                    >
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';

export default Vue.extend({});
</script>
